{include file="/public/header"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" id="formBasForm" lay-filter="formBasForm">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="height: 32px;border-radius: 4px;">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" style="border-radius: 0px 4px 4px 0px;" name="username" class="layui-input" value="{$adminInfo['username']}" placeholder="请输入要修改的用户名"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="height: 32px;border-radius: 4px;">原密码</label>
                    <div class="layui-input-block">
                        <input type="password" style="border-radius: 0px 4px 4px 0px;" name="oldPassword" class="layui-input" placeholder="请输入旧密码"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="height: 32px;border-radius: 4px;">新密码</label>
                    <div class="layui-input-block">
                        <input type="password" style="border-radius: 0px 4px 4px 0px;" name="newPassword" class="layui-input" onkeyup="pwdComplex()" placeholder="请输入新的密码，最少六位"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showpercent="true">
                        <span class="cinnerprogress" id="innerprogress" lay-percent="0%"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="sf-tips">
                        修改用户名：输入要修改的用户名和旧密码<br>
                        修改密码：输入旧密码和新密码即可
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn" lay-filter="submitBtn" lay-submit>&emsp;提交&emsp;</button>
                        <button type="reset" id="formreset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{include file="/public/footer"}
<script>
    layui.use(['admin', 'form', 'element', 'notice'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var notice = layui.notice;
        var element = layui.element;
        var admin = layui.admin;

        $('#formreset').click(function () {
            $("#formBasForm")[0].reset();
            notice.msg('重置表单成功！', {icon: 1, audio:'1'});
        });

        window.pwdComplex = function(){
            var pwdobj = $("input[name='newPassword']"); //获取密码输入框对象
            var pwdprogress = $("#innerprogress"); //获取span标签对象
            var regxs = new Array();//定义一个数组用于存放不同的正则表达式
            regxs[0] = /[^a-zA-Z0-9_]/g;
            regxs[1] = /[a-z]/g;
            regxs[2] = /[0-9]/g;
            regxs[3] = /[A-Z]/g;
            var val = pwdobj.val();//获取用户输入的密码
            var len = val.split('').length;//获取用户输入的密码长度
            var sec = 0; //定义一个变量用于存放密码强度
            if (len >= 6) { //用于判断用户输入的密码强度
             // 至少六个字符
                $.each(regxs, function(i, item){
                    if (item.test(val)) {
                        sec++;
                    }
                });
            }

            switch(sec){
                case 1:
                    pwdprogress.attr("class","layui-progress-bar layui-bg-red");
                    element.progress('demo', '25%');
                    break;
                case 2:
                    pwdprogress.attr("class","layui-progress-bar layui-bg-orange");
                    element.progress('demo', '50%');
                    break;
                case 3:
                    pwdprogress.attr("class","layui-progress-bar layui-bg-blue");
                    element.progress('demo', '75%');
                    break;
                case 4:
                    pwdprogress.attr("class","layui-progress-bar");
                    element.progress('demo', '100%');
                    break;
                default:
                    pwdprogress.attr("class","layui-progress-bar layui-bg-red");
                    element.progress('demo', '0%');
            }
        };

        form.on('submit(submitBtn)', function (data) {
            notice.msg('正在执行中..', {icon: 4, close: true});
            $.ajax({
                type: "POST",
                url: '{:url("/Index/editPassword")}',
                data: data.field,
                dataType: "json",
                success: function(data) {
                    notice.destroy();
                    if (data.code == 0) {
                        notice.msg(data.msg, {icon: 1, audio:'1'});
                    } else {
                        notice.msg(data.msg, {icon: 2, audio:'1'});
                    }
                },
                error: function() {
                    notice.destroy();
                    notice.msg("服务器错误！", {icon: 2, audio:'1'});
                }
            });
            return false;
        });
    });
</script>